<template>
	<view>
		<view>
			<view>篮球</view>
			<view>{{msg}}</view>
			<view>{{'你好' + '世界'}}</view>
			<view>{{1 + 2}}</view>
			<view>{{flag ? '我是真的' :'假的'}}</view>
			<image :src="imgURL" mode="aspectFill"></image>
			<view v-for="(item, index) in arr" v-bind:key="item.id">
				序号：{{index}}, 昵称：{{item.name}}, 年龄：{{item.age}}. 
			</view>
			<!-- <view class="iconfont icon-index-fill" v-on:click="clickHandle(22)"></view> -->
		</view>
		<view>
			<text selectable>篮球</text>
		</view>
		<view class="box" hover-class="box-active" hover-stop-propagation>测试hover</view>
		<button type="primary" plain>按钮</button>
		<button size="mini" disabled loading="true">按钮</button>
		<!-- <image src="http://destiny001.gitee.io/image/cxk.gif"></image>
		<image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFit"></image> -->
		<button @click="clickHandle(11, $event)">按钮02</button>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				msg: "hello",
				flag: false,
				imgURL: 'http://destiny001.gitee.io/image/monkey_02.jpg',
				arr:[
					{
						name: "Sam",
						age: 22,
						id: 1
					},
					{
						name: "Hbisedm",
						age: 25,
						id: 2
					},
					{
						name: "Amy",
						age: 21,
						id: 3
					}
				]
			}
		},
		methods:{
			clickHandle(num, e){
				console.log("hello", num, e)
			}
		}
	}
</script>

<style lang="scss" >
	.box{
		width: 100rpx;
		height: 100rpx;
		background: green;
	}
	.box-active{
		background: red;
	}
	
</style>
